<template>
  <view class="login">
    <nav-custom :showSearch="false"></nav-custom>
    <view class="content">
      <!-- 头部logo -->
      <view class="header">
        <image :src="logoImage"></image>
      </view>
      <!-- 主体表单 -->
      <view class="main">
        <wInput v-model="username" type="text" maxlength="11" placeholder="账号" :focus="isFocus"></wInput>
        <wInput v-model="password" type="password" maxlength="15" placeholder="密码"></wInput>
      </view>
      <wButton class="wbutton" text="登 录" :rotate="isRotate" @click="handleLogin"></wButton>
      <!-- 其他登录 -->
      <view class="other_login cuIcon">
        <view class="login_icon">
          <view class="cuIcon-weixin" @tap="login_weixin"></view>
        </view>
        <view class="login_icon">
          <view class="cuIcon-weibo" @tap="login_weibo"></view>
        </view>
        <view class="login_icon">
          <view class="cuIcon-github" @tap="login_github"></view>
        </view>
      </view>
      <!-- 底部信息 -->
      <view class="footer">
        <navigator url="forget" open-type="navigate">找回密码</navigator>
        <text>|</text>
        <navigator url="register" open-type="navigate">注册账号</navigator>
      </view>
    </view>
  </view>
</template>

<script>
  import wInput from '../components/watch-login/watch-input.vue' //input
  import wButton from '../components/watch-login/watch-button.vue' //button

  export default {
    data() {
      return {
        //logo图片
        logoImage: '../../static/bestCake-logo.jpg',
        isRotate: false, //是否加载旋转
        isFocus: true, // 是否聚焦
        username: '',
        password: '',
      };
    },
    components: {
      wInput,
      wButton,
    },
    methods: {
      handleLogin() {
        const {
          username,
          password
        } = this
        if (username && password) {
          this.$H.post(`/1.1/login`, {
            username,
            password
          }).then(res => {
            if (res.statusCode == 200) {
              this.$store.commit('user/saveUserInfo', res.data)
              uni.navigateBack({
                delta: 1,
                success: () => {
                  this.$store.commit('cart/changeLoginShow', false)
                  uni.showToast({
                    title: '登录成功',
                    icon: 'none'
                  })
                }
              })
            }
          }).catch((err) => {
            console.log(err);
            err.data.code == 211 && uni.showToast({
              title: '账号或密码错误',
              icon: 'none',
            })
          })
        } else {
          uni.showToast({
            title: '请填写账号和密码',
            icon: 'none'
          })
        }
      },
      login_weixin() {
        //微信登录
        uni.showToast({
          icon: 'none',
          position: 'bottom',
          title: '...'
        });
      },
      login_weibo() {
        //微博登录
        uni.showToast({
          icon: 'none',
          position: 'bottom',
          title: '...'
        });
      },
      login_github() {
        //github登录
        uni.showToast({
          icon: 'none',
          position: 'bottom',
          title: '...'
        });
      }
    }
  }
</script>

<style>
  @import url("../components/watch-login/css/icon.css");
  @import url("./css/main.css");
</style>
